<template>
  <view class="flex-row align-center" :style="{padding}" @click="onclick">
    <view
      class="l-radio-box flex-row flex-center"
      :class="{'radio-box-checked':checked}"
      :style="{width:size,height:size,borderColor:checked?checkRadioColor:radioColor,marginRight:space}"
    >
      <view
        class="l-radio"
        :class="{'radio-checked':checked}"
        :style="{background:checked?checkRadioColor:''}"
      />
    </view>
    <view>
      <slot v-if="hasSlot" />
      <text
        v-else
        class="text-30 text-t2"
        :class="{checked}"
        :style="{color:checked?checkColor:color,fontSize}"
      >{{ item.label }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LRadio',
  props: {
    checked: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    },
    size: {
      type: String,
      default: ''
    },
    fontSize: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    radioColor: {
      type: String,
      default: ''
    },
    checkColor: {
      type: String,
      default: ''
    },
    checkRadioColor: {
      type: String,
      default: ''
    },
    hasSlot: {
      type: Boolean,
      default: false
    },
    space: {
      type: String,
      default: ''
    },
    padding: {
      type: String,
      default: ''
    }
  },
  methods: {
    onclick() {
      this.$emit('click', this.item)
    }
  }
}
</script>

<style scoped lang="scss">
.l-radio-box{
  width:34rpx;
  height:34rpx;
  border-radius:50%;
  background:#FFFFFF;
  border:2rpx solid $color-border;
  margin-right:8rpx;
}
.l-radio{
  width:70%;
  height:70%;
  background:#FFFFFF;
  border-radius: 50%;
}
.radio-box-checked{
  border-color:$color-primary;
}
.radio-checked{
  background:$color-primary;
}
.checked{
  color:$color-primary;
}
</style>
